<template>
  <div class="live-main-layout">
    <!-- 搜索与操作区 -->
    <div class="live-header">
      <el-input v-model="params.name" placeholder="搜索皮肤名称" class="search-input"></el-input>
      <el-input v-model="params.author" placeholder="搜索英雄/拥有者" class="search-input"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="findBySearch">查询</el-button>
      <el-button @click="reset">清空</el-button>
      <el-button type="success" icon="el-icon-plus" v-if="user.role === 'ROLE_ADMIN'" @click="add">新增</el-button>
    </div>
    <!-- 商品卡片区 -->
    <div class="live-card-list">
      <el-card
        v-for="item in tableData"
        :key="item.id"
        class="live-card"
        shadow="hover"
      >
        <div class="live-card-img">
          <el-image
            :src="'http://localhost:8080/api/files/' + item.img"
            :preview-src-list="['http://localhost:8080/api/files/' + item.img]"
            fit="cover"
          ></el-image>
        </div>
        <div class="live-card-info">
          <div class="live-card-title">{{ item.name }}</div>
          <div class="live-card-meta">
            <span>英雄：<b>{{ item.author }}</b></span>
            <span>分类：<span :class="'type-tag type-tag-' + item.typeId">{{ item.typeName }}</span></span>
          </div>
          <div class="live-card-meta">
            <span>价格：<b class="price">{{ item.price }}</b> 点券</span>
            <span>库存：{{ item.num }}</span>
          </div>
          <div class="live-card-meta">
            <span>阵营：{{ item.press }}</span>
          </div>
        </div>
        <div class="live-card-actions">
          <el-button size="mini" type="primary" class="lol-btn" @click="reserve(item)">预定</el-button>
          <el-button size="mini" class="lol-btn-edit" @click="edit(item)" v-if="user.role === 'ROLE_ADMIN'">编辑</el-button>
          <el-popconfirm title="确认删除该皮肤？" @confirm="del(item.id)">
            <el-button slot="reference" size="mini" type="danger" class="lol-btn-del" v-if="user.role === 'ROLE_ADMIN'">删除</el-button>
          </el-popconfirm>
        </div>
      </el-card>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[5,10,15,20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹窗表单 -->
    <el-dialog title="皮肤信息" :visible.sync="dialogFormVisible" width="420px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="皮肤名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="英雄/拥有者">
          <el-input v-model="form.author" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="阵营">
          <el-input v-model="form.press" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.typeId" placeholder="请选择">
            <el-option v-for="item in typeObjs" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="http://localhost:8080/api/files/upload"
            :on-success="successUpload"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">上传图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-image v-if="form.img" :src="'http://localhost:8080/api/files/' + form.img" style="width:60px;height:60px;margin-top:8px;" fit="cover"></el-image>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      params: {
        name: '',
        author: '',
        pageNum: 1,
        pageSize: 8,
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form: {},
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      typeObjs: []
    }
  },
  created() {
    this.findTypes();
    this.findBySearch()
  },
  methods: {
    findBySearch(){
      request.get("/live/search", {
        params: this.params
      }).then(res =>{
        if(res.code === '0'){
          this.tableData = res.data.list;
          this.total = res.data.total;
        }else{
          this.$message.error(res.data);
        }
      })
    },
    findTypes() {
      request.get("/type").then(res => {
        if (res.code === '0') {
          this.typeObjs = res.data;
        } else {
          this.$message.error(res.data)
        }
      })
    },
    add(){
      this.form = {};
      this.dialogFormVisible = true
    },
    edit(obj){
      this.form = Object.assign({}, obj);
      this.dialogFormVisible = true
    },
    reset(){
      this.params = {
        name: '',
        author: '',
        pageNum: 1,
        pageSize: 8,
      }
      this.findBySearch();
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum){
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    submit(){
      request.post("/live", this.form).then(res =>{
        if(res.code === "0"){
          this.$message.success("操作成功");
          this.dialogFormVisible = false;
          this.findBySearch();
        }else{
          this.$message.error(res.data);
        }
      })
    },
    del(id){
      request.delete("/live/" + id).then(res => {
        if (res.code === "0") {
          this.$message.success("删除成功");
          this.findBySearch();
        } else {
          this.$message.error(res.data);
        }
      })
    },
    successUpload(res){
      this.form.img = res.data;
    },
    reserve(row) {
      let param = { liveId: row.id, userId: this.user.id };
      request.post("/reservelive", param).then(res => {
        if (res.code === "0") {
          this.$message.success(`预定成功！英雄：${row.author}，请联系商家`);
          this.findBySearch();
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
}
</script>

<style scoped>
.live-main-layout {
  max-width: 1300px;
  margin: 0 auto;
  padding: 38px 12px 40px 12px;
  background: linear-gradient(135deg, #232f3e 0%, #181c2f 100%);
  min-height: 100vh;
}
.live-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.search-input {
  width: 220px;
  background: #232f3e;
  color: #fff;
  border: 1.5px solid #409EFF;
  border-radius: 8px;
}
.live-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: flex-start;
  margin-bottom: 32px;
}
.live-card {
  width: 340px;
  min-height: 210px;
  border-radius: 18px;
  box-shadow: 0 0 24px 0 #409eff33, 0 2px 12px #232f3e;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #232f3e 60%, #232f3e 100%);
  border: 2px solid transparent;
  transition: box-shadow 0.25s, border 0.25s, transform 0.18s;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.live-card:hover {
  box-shadow: 0 0 48px 0 #409eff99, 0 8px 32px #232f3e;
  border: 2px solid #409EFF;
  transform: translateY(-6px) scale(1.03);
  z-index: 2;
}
.live-card-img {
  width: 100%;
  height: 180px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: #181c2f;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #409EFF33;
}
.live-card-info {
  padding: 18px 20px 8px 20px;
  flex: 1;
}
.live-card-title {
  font-size: 20px;
  color: #ffd04b;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #232f3e;
}
.live-card-meta {
  font-size: 14px;
  color: #b3c0d1;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 0 1px 4px #232f3e;
}
.type-tag {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  margin-left: 2px;
  letter-spacing: 1px;
}
.type-tag-1 { background: linear-gradient(90deg,#409EFF,#1BBFB4); }
.type-tag-2 { background: linear-gradient(90deg,#a259ff,#409EFF); }
.type-tag-3 { background: linear-gradient(90deg,#ffd04b,#f56c6c); }
.type-tag-4 { background: linear-gradient(90deg,#232f3e,#ffd04b); }
.live-card-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 20px 16px 20px;
  border-top: 1px solid #232f3e;
  background: #181c2f;
}
.lol-btn {
  background: linear-gradient(90deg, #409EFF 60%, #1BBFB4 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: background 0.2s;
}
.lol-btn:hover {
  background: linear-gradient(90deg, #1BBFB4 60%, #409EFF 100%);
}
.lol-btn-edit {
  background: linear-gradient(90deg, #ffd04b 60%, #409EFF 100%);
  color: #232f3e;
  border: none;
  border-radius: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}
.lol-btn-edit:hover {
  background: linear-gradient(90deg, #409EFF 60%, #ffd04b 100%);
  color: #fff;
}
.lol-btn-del {
  background: linear-gradient(90deg, #f56c6c 60%, #232f3e 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}
.lol-btn-del:hover {
  background: linear-gradient(90deg, #232f3e 60%, #f56c6c 100%);
}
.block {
  margin-top: 24px;
  text-align: center;
}
.dialog-footer {
  text-align: right;
  padding: 20px 0 0;
}
.el-dialog__wrapper {
  backdrop-filter: blur(2px);
}
@media (max-width: 900px) {
  .live-card-list {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
  .live-card {
    width: 98%;
  }
  .live-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
}
</style>